<template>
  <div v-if="article" class="detail-container">
    <div class="article-detail-card">
      <h1 class="detail-title">{{ article.title }}</h1>
      <div class="detail-meta">
        <span>作者：{{ article.username }}</span>
        <span>发布时间：{{ article.created_at }}</span>
        <span>分类：{{ article.category_names?.join(', ') }}</span>
        <span>标签：{{ article.tag_names?.join(', ') }}</span>
      </div>
      <div class="detail-content" v-html="article.content"></div>
      <button @click="likeArticle" class="like-btn">点赞({{ article.likes }})</button>
      <h3 class="comment-title">评论</h3>
      <div v-for="comment in comments" :key="comment.id" class="comment-item">
        <div class="comment-user">{{ comment.username }}：</div>
        <div class="comment-content">{{ comment.content }}</div>
        <div class="comment-time">{{ comment.created_at }}</div>
      </div>
      <form @submit.prevent="addComment" class="comment-form">
        <textarea v-model="commentContent" placeholder="写下你的评论" class="comment-input"></textarea>
        <button type="submit" class="comment-btn">评论</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: null,
      comments: [],
      commentContent: '',
      // 本地模拟数据
      mockArticle: {
        id: 1,
        title: 'Vue3 组合式 API 实战',
        username: '小明',
        created_at: '2024-05-01',
        category_names: ['前端开发'],
        tag_names: ['Vue3', '组合式API'],
        content: '<p>这是文章内容，支持HTML。</p>',
        likes: 56
      },
      mockComments: [
        { id: 1, username: '评论者A', content: '写得真好！', created_at: '2024-05-02' },
        { id: 2, username: '评论者B', content: '受益匪浅', created_at: '2024-05-03' }
      ]
    }
  },
  methods: {
    fetchDetail() {
      // TODO: 替换为真实接口请求
      // this.$http.get(`/api/articles/${this.$route.params.id}`).then(res => { this.article = res.data })
      setTimeout(() => {
        this.article = Object.assign({}, this.mockArticle, { id: this.$route.params.id })
        this.comments = this.mockComments
      }, 300)
    },
    likeArticle() {
      // TODO: 替换为真实接口请求
      // this.$http.post(`/api/articles/${this.article.id}/like`).then(() => { this.article.likes++ })
      this.article.likes++
    },
    addComment() {
      // TODO: 替换为真实接口请求
      // this.$http.post(`/api/articles/${this.article.id}/comments`, { content: this.commentContent }).then(() => {...})
      if (!this.commentContent) return
      this.comments.push({
        id: Date.now(),
        username: '你',
        content: this.commentContent,
        created_at: new Date().toLocaleDateString()
      })
      this.commentContent = ''
    }
  },
  mounted() {
    this.fetchDetail()
  }
}
</script>

<style scoped>
.detail-container {
  display: flex;
  justify-content: center;
}
.article-detail-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(66,185,131,0.08);
  padding: 36px 32px 28px 32px;
  width: 100%;
  max-width: 700px;
}
.detail-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 12px;
  color: #222;
}
.detail-meta {
  color: #888;
  font-size: 0.98rem;
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.detail-content {
  font-size: 1.08rem;
  color: #333;
  margin-bottom: 24px;
  line-height: 1.8;
}
.like-btn {
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 22px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 24px;
  transition: background 0.2s;
}
.like-btn:hover {
  background: #1890ff;
}
.comment-title {
  margin: 18px 0 10px 0;
  color: #1890ff;
  font-size: 1.15rem;
  font-weight: bold;
}
.comment-item {
  background: #f7f8fa;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(66,185,131,0.04);
}
.comment-user {
  color: #42b983;
  font-weight: bold;
  margin-bottom: 2px;
}
.comment-content {
  color: #333;
  margin-bottom: 2px;
}
.comment-time {
  color: #aaa;
  font-size: 0.92rem;
}
.comment-form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comment-input {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 10px 12px;
  font-size: 1rem;
  min-height: 60px;
  resize: vertical;
}
.comment-btn {
  background: #1890ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 0;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  width: 120px;
  align-self: flex-end;
  transition: background 0.2s;
}
.comment-btn:hover {
  background: #42b983;
}
</style> 